<template>
  <div class="search-nav">
    <div class="slogan">{{ slogan }}</div>
    <div class="align">
      <div class="search-container">
        <div class="input">
          <i class="icon el-icon-search"></i>
          <input v-model="text" type="text" placeholder="请输入内容" maxlength="40" @keyup.enter="handleSearch(text)">
        </div>
        <div><el-button type="primary" size="mini">检索</el-button></div>
        <div><el-button type="primary" size="mini">高级检索</el-button></div>
      </div>
      <div v-if="hot.length!==0" class="hot-container">
        <div class="text">热搜词:</div>
        <div v-for="(k, i) in hot" :key="i" class="key">
          <div v-if=" k">{{ k.length > 8? k.substr(0, 8) + '...': k }}</div>
        </div>
        <!-- <div v-for="(k, i) in hot" :key="i" class="key" @click="handleSearch(k.word)">
          <div v-if=" k.word">{{ k.word.length > 4? k.word.substr(0, 4) + '...': k.word }}</div>
        </div> -->
      </div>
    </div>
    <div class="search-tabs">
      <div class="left"></div>
      <div class="center">
        <div class="btn"><div>项目</div><div>1000</div></div>
        <div class="btn"><div>人员</div><div>1000</div></div>
        <div class="btn"><div>资源</div><div>1000</div></div>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>
<script>
// import { hotWordAdd, hotWordList } from '@/api/index'

export default {
  name: 'SearchNav',
  data() {
    return {
      text: '',
      slogan: '高校科研项目大数据分析平台',
      hot: ['人工智能机器学习', '重庆邮电大学', '计算机专业', '信息处理技术', '数字图像处理']
    }
  },
  created() {
    // this.getHotWordList()
  },
  methods: {
    // // 新增热搜词
    // getHotWordAdd(word) {
    //   hotWordAdd({ word: word }).then(res => {
    //     console.log(res)
    //   })
    // },
    // getHotWordList() {
    //   hotWordList().then(res => {
    //     if (res.success) {
    //       this.hot = res.data
    //     }
    //   })
    // },
    // 搜索
    handleSearch(text) {
      // if (text) {
      //   this.getHotWordAdd(text)
      // }
      // this.$router.push({ path: '/resourcePage', query: { text: text }})
    }
  }
}
</script>
<style lang="scss" scoped>
$h-color: #3788FF;
$d-color: #333333;
//窗口宽度大于1920px时执行的样式
@media (min-width: 1900px) { .input { width: 974px;} }
//窗口宽度小于1920时执行的样式
@media (max-width: 1900px) { .input {width: 674px; } }

.search-nav {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  .slogan {
    font-size: 24px;
    font-weight: bold;
    color: $d-color;
    text-align: center;
    margin-top: 10px;
  }
  .align{
    margin: 20px auto;
  }
  .search-container {
    padding-bottom: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    .input {
      border: 1px solid #DCDFE6;
      // width: 974px;
      height: 44px;
      border-radius: 50px;
      background-color: #FFF;
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: space-between;
      align-items: center;
      margin-right: 15px;
      .icon {
        line-height: 44px;
        font-size: 20px;
      }
      input {
        flex-grow: 1;
        border: none !important;
        height: 100%;
        padding: 0 10px;
        &:focus {
          outline: 0;
        }
      }
      .btn {
        cursor: pointer;
      }
    }
    div{
      margin-right: 10px;
    }
  }
  .hot-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 12px;
    div {
      padding:0 5px;
    }
    .text{
      color: $d-color
    }
    .key {
      color: $h-color;
      cursor: pointer;
    }
  }
}
 .search-tabs{
    display: flex;
    align-items: center;
    .left,.right{
      width: 260px;
    }
    .center{
      display: flex;
      align-items: center;
      flex: 1;
      background: #FFF;
      margin:10px;;
      padding: 12px 18px;
      .btn{
        color: $d-color;
        border: 1px solid #DDDDDD;
        margin-right:10px;
        padding: 10px 40px;
        cursor: pointer;
        &:hover{
           color: #FFF;
          background: $h-color;
        }
      }
    }

  }
</style>
